<template>
  <div style="height: 100%">
    <div class="autoScroll_y">
      <div class="selectBlock flexTitlePadding">
        <div class="viewBoxTitle flexTitle">
          <span>邮件通知日志</span>
        </div>
        <div style="margin-top: 14px;">
          <el-row :gutter="25">
            <el-col :span="6" >
              <el-input size="small" placeholder="请输入接收人邮件" v-model="listQuery.mailTo" clearable></el-input>
            </el-col>
            <el-col :span="6" >
              <el-input size="small" placeholder="请输入邮件标题" v-model="listQuery.title" clearable></el-input>
            </el-col>
            <el-col :span="6" >
              <el-select size="small" placeholder="请选择邮件发送状态" v-model="listQuery.result" clearable>
                <el-option v-for="item in mailStatusOptions" :key="item.key" :label="item.display_name" :value="item.key">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="6" >
              <div class="searchBtnGroup">
                <el-button size="mini" type="success" @click="getList('find')">查 询</el-button>
                <el-button size="mini" type="danger" @click="handleReset">重 置</el-button>
                <el-button size="mini" type="primary" @click="handleCreate">新通知</el-button>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="elementTableBox">
        <el-table :key='tableKey' :data="list" v-loading="listLoading"
                  class="elementTable"
                  header-cell-class-name="elementTableHeader"
                  cell-class-name="elementTableBody"
                  element-loading-text="给我一点时间"
                  size="small"
                  height="320"
                  stripe
                  highlight-current-row style="width: 100%;">
          <el-table-column align="center" label="序号" min-width="50px" type="index">
            <template slot-scope="scope">
              <span>{{scope.$index + (serialNumber - 1) * 10 + 1}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="接收人" prop="mailTo">
            <template slot-scope="scope">
              <span>{{scope.row.mailTo}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="通知邮件标题" prop="title">
            <template slot-scope="scope">
              <span>{{scope.row.title}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="发送状态" prop="result">
            <template slot-scope="scope">
              <span v-if="scope.row.result==1">发送成功</span>
              <span v-else-if="scope.row.result==0">发送失败</span>
              <span v-else>未知状态</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="发送时间" prop="sendTime">
            <template slot-scope="scope">
              <span>{{scope.row.sendTime}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操 作" width="160">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="handleView(scope.row)">查看</el-button>
              <el-button type="danger" size="mini" @click="handleDelete(scope.row,'delete')">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-container">
          <el-pagination background
                         @size-change="handleSizeChange"
                         @current-change="handleCurrentChange"
                         :current-page="listQuery.page"
                         :page-sizes="[10,20,30, 50]"
                         :page-size="listQuery.limit"
                         layout="total, sizes, prev, pager, next, jumper"
                         :total="total">
          </el-pagination>
        </div>
      </div>
    </div>


    <!--新建邮件通知弹出层-->
    <el-dialog
      v-if="dialogVisibleAddMailNotice"
      custom-class="dhcWebLayer"
      top="0"
      :close-on-click-modal="false"
      title="邮件通知发送"
      :visible.sync="dialogVisibleAddMailNotice"
      width="70%">
      <newMailNotice @changeCloseDialog="changeCloseDialog"></newMailNotice>
    </el-dialog>


    <!--邮件通知查看弹出层-->
    <el-dialog
      v-if="dialogVisibleViewMailNotice"
      custom-class="dhcWebLayer"
      top="0"
      :close-on-click-modal="false"
      :title="mailNoticeFormData.title|'邮件通知'"
      :visible.sync="dialogVisibleViewMailNotice"
      width="70%">
      <viewMailNotice :mailNoticeFormData="mailNoticeFormData" @changeCloseDialog="changeCloseDialog"></viewMailNotice>
    </el-dialog>
  </div>
</template>

<script>
    import '@/styles/newstyle.scss'
    import {
        queryMailPage,
        deleteMailNotice
    } from '@/api/message/index'
    import {
        isInnerOption,
        statusOptions,
        statusKeyValue,
        isInneNoKeyValue
    } from '@/utils/allOptions'

    import newMailNotice from './newMailNotice'
    import viewMailNotice from './viewMailNotice'

    export default {
        components: {
            newMailNotice,
            viewMailNotice
        },
        directives: {},
        data() {
            return {
                dialogVisibleAddMailNotice: false,
                dialogVisibleEditMailNotice: false,
                dialogVisibleViewMailNotice: false,
                mailNoticeFormData: {},
                mailStatusOptions: [{key:'0', display_name:'发送失败'},{key:'1', display_name:'发送成功'}],
                list: null,
                listQuery: {
                    rowBounds: {
                        offset: 0,
                        limit: 10
                    },
                    fields: [],
                    mailTo: '',
                    title: '',
                    result: '',
                    sort: [
                        {
                            direction: 'DESC',
                            property: 'sendTime'
                        }
                    ]
                },
                total: null,
                listLoading: false,
                // table list
                selectId: '',
                serialNumber:1
            }
        },
        // 画面刚进入method
        mounted() {
            this.editSubSystemsOptions()
            this.getList()
        },
        filters: {
            yesOrNoFilter(target) {
                return isInneNoKeyValue[target]
            },
            statusFilter(target) {
                return statusKeyValue[target]
            }
        },
        methods: {
            changeCloseDialog() {
                this.dialogVisibleAddMailNotice = false
                this.dialogVisibleEditMailNotice = false
                this.dialogVisibleViewMailNotice = false
                this.getList()
            },
            editSubSystemsOptions() {
                const query = {
                    sort: [
                        {
                            direction: 'ASC',
                            property: 'id'
                        }
                    ]
                }

                selectSysSubsys(query).then(response => {
                    const records = response.data.data.records
                    if (response.data.data.count > 0) {
                        this.subSystemsOptions = []
                        for (const item of records) {
                            const input = {}
                            input.id = item.id
                            input.name = item.name
                            this.subSystemsOptions.push(input)
                        }
                    }
                })
            },
            resetInfo() {
                this.editType = ''
            },
            handleCreate() {
                this.editType = '0'
                this.dialogVisibleAddMailNotice = true
                // this.$router.push({
                //   name: 'newRole',
                //   params: { id: this.$store.getters.orgId }
                // })
            },
            // 检索条件框回车键按下后，跳转到首页
            handleFilter() {
                this.listQuerypage = 1
                this.getList()
            },
            // 翻页器使用
            handleSizeChange(val) {
                this.listQuerypage = 1
                this.listQuery.rowBounds.limit = val
                this.getList()
            },
            // 翻页器使用
            handleCurrentChange(val) {
                this.serialNumber = val
                this.listQuerypage = val
                this.listQuery.rowBounds.offset =
                    this.listQuery.rowBounds.limit * (val - 1)
                this.getList()
            },
            handleDelete(row,flag) {
                this.$confirm('此操作将删除邮件通知【' + row.title + '】, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                .then(() => {
                    const condition = {
                        id: row.mesId
                    }
                    deleteMailNotice(condition).then(response => {
                        this.$message({
                            message: '删除成功。',
                            type: 'success'
                        })
                        this.getList(flag)
                    })
                })
                .catch(error => {
                    console.error(error)
                })
            },
            displayMain() {
                this.resetInfo()
                this.getList()
            },
            handleEdit(row) {
                this.mailNoticeFormData = row
                this.dialogVisibleViewMailNotice = true
            },
            handleView(row) {
                this.mailNoticeFormData = row
                this.dialogVisibleViewMailNotice = true
            },
            getList(flag) {
                this.listLoading = true
                this.listQuery.orgId = this.$store.getters.orgId
                if (flag === 'find') {
                    this.listQuery.rowBounds.offset = 0
                    this.serialNumber = 1
                    this.total = 0
                }
                if (flag ==='delete') {
                    if (this.listQuery.rowBounds.offset == (this.total - 1)
                        && this.listQuery.rowBounds.offset >= this.listQuery.rowBounds.limit) {
                        this.listQuery.rowBounds.offset -=this.listQuery.rowBounds.limit
                        this.serialNumber -=1
                    }
                }
                const that = this
                //compositeSelect(this.listQuery).then(response => {
                queryMailPage(this.listQuery).then(response => {
                    this.list = response.data.data
                    this.total = response.data.count
                    this.listLoading = false
                })
            },
            handleReset() {
                this.listQuery.condition.name.value = ''
                this.listQuery.condition.status.value = '0'
                this.listQuery.condition.subsysid.value = ''
                this.listQuery.rowBounds.offset = 0
                this.listQuery.rowBounds.limit = 10
                this.list = null
                this.total = 0
                this.serialNumber = 1
                this.getList()
            }
        }
    }
</script>

<style scoped>
  .text {
    font-size: 14px;
  }
  .select-container {
    padding: 10px 10px;
    margin-bottom: 10px;
    border-radius: 4px;
    border: 1px solid #eeeeee;
  }
  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both;
  }

  .box-card {
    width: 100%;
  }
</style>
